<template class="page">
	<view class="service">
		<view class="service-wrapper">
			<view class="service-item" @click="hanldCall()">
				<!-- <button class="ser-buttom-wrapper ser" > -->
					 <view style="width: 80upx;height: 80upx;    margin: 0 auto;">
					<image src="../../static/images/baotuiyuan.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="service-text" >购买车险</view>
				<!-- </button> -->
			</view>
			<view class="service-item" @click="hanlderror()">
				<view style="width: 80upx;height: 80upx;    margin: 0 auto;">
				<image src="../../static/images/weixiantuoyuan.png"  style="width: 100%;height: 100%;"></image>
				</view>
				<view class="service-text">故障诊断</view>
			</view>
			<view class="service-item" @click="hanldbook()">
				<view style="width: 80upx;height: 80upx;    margin: 0 auto;">
				<image src="../../static/images/shezhi.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="service-text">保养手册</view>
			</view>
			<view class="service-item" @click="hanldRepairAddress()">
				<view style="width: 80upx;height: 80upx;    margin: 0 auto;">
				<image src="../../static/images/weizhituoyuan.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="service-text">维修网点</view>
			</view>
		</view>
		<view class="ser-bg">
			<view class="ser-body">
				<view class="gener-table">
				
				
				<view class="page-section swiper" style="background-color: #fff;padding-top: 4px;">
					<view class="page-section-spacing" style="margin: 0px 16px;">
						<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :vertical="true" :circular="true" :display-multiple-items="6" style="height: 320px">
							<swiper-item  v-for="(item,index) in carcus" :key="index" @click="hanldcarcus(item)">
								<view class="swiper-item">
									<view class="gener-table-item" >
										<view class="table-item-wrapper">
											<view class="table-via">
												<image src="../../static/images/kefuyuan.png"></image>
											</view>
											<view class="table-info">
												<view class="table-name">
													<text class="table-user">{{item.problem}}</text>
												</view>
												<view class="table-time">{{item.last}}</view>
											</view>
											<view class="table-number">{{item.utime.substring(5,10)}}</view>
										</view>
									</view>
									</view>
								</swiper-item>
						</swiper>
						
								
				
					</view>
				</view>
				
				</view>
				
				
				
			</view>
		</view>
		
				<button class="ser-buttom-wrapper ser" hover-class="none" open-type="contact" bindcontact="showChat"
				 :session-from="kefupara">
					<view class="ser-buttom">客服咨询</view>
				</button>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				carcus:[],
				//轮播

			}
		},
		onLoad(){
			this.getCarcustomere()
		},
		methods: {
			//打电话
			hanldCall() {
				  wx.makePhoneCall({
					phoneNumber: '18874872186'
				  });
			},
			//
			hanldcarcus(item){
				console.log(item)
				let params = encodeURIComponent(
					'image_id=' + item.image_id
				)
				
				this.$common.navigateTo(
					'serviceInfo?params=' + params
				)
			},
			getCarcustomere() {
				this.$api.carcustomer({}, res => {
					if (res.status) {
						this.carcus = res.data; //设备类型			
						console.log(this.carcus)
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			hanldCarSafe(){
				console.log('期待期待')
					this.$common.errorToShow('敬请期待')
			},
			//手册
			hanldbook(){
				uni.navigateTo({
					url:'handbook'
				})
			},
			//故障诊断
			hanlderror(){
				uni.navigateTo({
					url:'error'
				})
			},
			//维修网点
			hanldRepairAddress(){
				uni.navigateTo({
					url:'repairAddress'
				})
			},
			//在线客服,只有手机号的，请自己替换为手机号
			showChat() {
				let _this = this;
				// #ifdef H5
				window._AIHECONG('ini', {
					entId: this.config.ent_id,
					button: false,
					appearance: {
						panelMobile: {
							tone: '#D62222',
							sideMargin: 30,
							ratio: 'part',
							headHeight: 50
						}
					}
				})
				//传递客户信息
				window._AIHECONG('customer', {
					head: _this.userInfo.avatar,
					'名称': _this.userInfo.nickname,
					'手机': _this.userInfo.mobile
				})
				window._AIHECONG('showChat')
				// #endif
			
				// 客服页面
				// #ifdef APP-PLUS || APP-PLUS-NVUE
				this.$common.navigateTo('../customer_service/index');
				// #endif
			
				// 头条系客服
				// #ifdef MP-TOUTIAO
				if (this.shopMobile != 0) {
					let _this = this;
					tt.makePhoneCall({
						phoneNumber: this.shopMobile.toString(),
						success(res) {},
						fail(res) {}
					});
				} else {
					_this.$common.errorToShow('暂无设置客服电话');
				}
				// #endif
			}
		}
	}
</script>

<style scoped>
	
		
	.service>>>uni-button:after{
		border:none !important;
	}
	/*  #ifdef  MP-WEIXIN */
	.service>>>button:after{
		border:none !important;
	}
/*  #endif  */
	.service {
		background-color: #fff;
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.service-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		color: #666666;
		font-size: 11px;
		height: 100px;
		background-color: #fff;
		align-items: center;
	}


	.ser-bg {
		background-image: url('../../static/images/fuw.png');
		height: 297px;
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
	}

	/*复制*/
	.gener-title-wrapper {
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.green-title-item {
		padding: 20px;
	}

	.gener-table {
		flex-direction: column;
		display: flex;
		background-color: #fff;
	}

	.table-via {
		width: 27px;
		height: 27px;
	}

	.table-via image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.gener-table-item {
		position: relative;
		display: flex;
		height: 55px;
		border-bottom: 1px soild #f5f5f5;

	}

	.table-info {
		position: absolute;
		left: 43px;
		top: 3px;
	}

	.table-item-wrapper {
		width: 100%;
		height: 100%;
	}

	.table-time {
		font-size: 11px;
		padding-top: 5px;
		color: #666666;
	}

	.green-title-item text {
		font-size: 20px;
		color: #30362A;
		font-weight: bold;
	}

	.green-title-item view {
		font-size: 14px;
		color: #999999;
	}

	.table-name {
		color: #333333;
		width: 426upx;
		overflow: hidden;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	.table-grade {
		font-size: 14px;
		/* 		padding-left: 10px;
 */
	}

	.table-number {
		color: #999999;
		position: absolute;
		right: 0px;
		top: 7px;
		font-size: 11px;

	}

	uni-page-body {
		height: 100% !important;
	}

	.order-none {
		text-align: center;
		padding: 200upx 0;
	}

	.order-none-img {
		width: 274upx;
		height: 274upx;
	}

	.table-user {
		margin-right: 10px;
		color: #333333;
		font-size: 13px;
		font-weight: bold;
	}

	.ser-body {
		margin: auto;
		width: 674upx;
		margin-top: 230upx;
		overflow: scroll;
		box-shadow: 0px 14px 14px 0px rgba(233, 233, 233, 0.5);
		border-radius: 10px;
	}

	.ser-buttom-wrapper {
		background-color: #fff;
		width: 100%;
		padding-bottom: 19px;
		position: fixed;
		bottom: 51px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.ser-buttom {
		width: 666upx;
		height: 41px;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		border: 1px solid rgba(214, 34, 34, 1);
		/* position: fixed; */
		/* bottom: 70px; */
		font-size: 15px;
		/* font-family: PingFang-SC-Bold,PingFang-SC; */
		font-weight: bold;
		color: rgba(214, 34, 34, 1);
		text-align: center;
		line-height: 41px;
	}




	/*  #ifdef  MP-WEIXIN */
	.page{
		height: 100%;
		background-color: #fff;
	}
	
	.ser-body {
		margin: auto;
		width: 674upx;
		margin-top: 230upx;
		overflow: scroll;
		box-shadow: 0px 14px 14px 0px rgba(233, 233, 233, 0.5);
		border-radius: 10px;
	}

	.body {
		background-color: #fff !important;
	}

	.ser-buttom-wrapper {
		background-color: #fff;
		width: 100%;
		height: 60px;
		padding-bottom: 19px;
		position: fixed;
		bottom: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.ser-buttom {
		width: 666upx;
		height: 41px;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		border: 1px solid rgba(214, 34, 34, 1);
		/* position: fixed; */
		/* bottom: 70px; */
		font-size: 15px;
		/* font-family: PingFang-SC-Bold,PingFang-SC; */
		font-weight: bold;
		color: rgba(214, 34, 34, 1);
		text-align: center;
		line-height: 41px;
	}


	/*  #endif  */
	

	.serbott{
		padding: 0;
		margin: 0;
		font-size: inherit;
		line-height: inherit;
		color: inherit;
		background-color: inherit;

	}
	

	
</style>
